<template>
	<view>
		<u-navbar :border-bottom="false" :customBack="saveBack" title="个人资料" title-color="#fff" back-icon-color="#fff">
			<template v-slot:right>
				<text @click="alterInfoFuc" class="nav-bar__cancel">保存</text>
			</template>
		</u-navbar>
		<my-list class="infoList">
			<my-list-item title="头像" @click="imgchage">
				<template slot="right">
				<u-avatar v-if="user.avatar"  mode="circle" class="txImg" :src="user.avatar"></u-avatar>
				<u-avatar v-else  class="txImg" src="../../../static/user/avatar.png"></u-avatar></template>
			</my-list-item>
			<my-list-item title="昵称">
				<template slot="right"><input  type="text" @blur="namechage"  class="rightInput" :value="user.username" maxlength="8"/></template>
			</my-list-item>
			<my-list-item class="infoNavR" @click="sexShow=true" title="性别" :right-text="cate"></my-list-item>
			<my-list-item class="infoNavR" @click="dataShow=true" title="出生日期" :right-text="time"></my-list-item>
		</my-list>
		<my-list class="infomt infoList">
			<my-list-item title="账号" :right-text="user.usercode+''" :showRightArrow="false"></my-list-item>
			<my-list-item title="学校" :right-text="user.schooleName" :showRightArrow="false"></my-list-item>
		</my-list>
		<!-- 性别 -->
		<u-picker v-model="sexShow" mode="selector" @confirm="getResult" :default-selector="[0]" :range="selectorObj" range-key="cateName"></u-picker>
		<!-- 日历 -->
		<u-calendar v-model="dataShow" :mode="mode" @change="change"></u-calendar>
		
		<my-confirm ref="headBack" @cancel="backCancel()" @confirm="backSubmit()" confirm-text="保存" cancel-text="不保存">是否保存更改的信息?</my-confirm>
	</view>
</template>
<script>
	// import { alioss } from '@/style/aliyun-oss-sdk.min.js' 
	export default {
		onLoad(option) {
			this.getInfoFuc();
		},
		data() {
			return {
				user: {},
				imgurl:'',//头像存放
				selectorObj: [{
						cateName: '男',
						id: 0
					},{
						cateName: '女',
						id: 1
					},
					{
						cateName: '保密',
						id: 2
					}
				],
				cate:'女',//性别
				cateId:1,//性别ID
				sexShow: false, //性别
				time: '', //默认时间
				dataShow: false, //显示时间组件
				mode: 'date', //时间
				url:'',//上传OSS的路径
				saveFlase:false,//确定返回吗
			};
		},
		onShow(){
			this.user.avatar=this.vuex_user.avatar;
		},
		methods: {
			saveBack(){
				if(!this.saveFlase){
					this.$nextTick(function() {
						this.$refs.headBack.open();
					});
				}
			},
			// 不保存
			backCancel(){
				this.vuex_user.avatar=this.imgurl;
				this.updateUser(this.vuex_user);
				this.$nextTick(function() {
					this.$refs.headBack.close();
				});
				uni.navigateBack()
			},
			// 保存
			backSubmit(){
				this.alterInfoFuc()
			},
			// 改变头像
			imgchage(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths[0];
				 	uni.navigateTo({
						url: 'cropper-default?src='+ tempFilePaths
					})
					}
				});
			},
			//获取信息
			getInfoFuc(){
				return new Promise((resolve, reject) => {
					this.request
						.get('/app/mine/getAppStuDetail')
						.then(res => {
							this.user=res;
						  this.imgurl=this.user.avatar;
							this.vuex_user.avatar=this.user.avatar;
							this.vuex_user.sex=res.sex;
							this.cateId=res.sex;
							this.updateUser(this.vuex_user);
							this.cate=this.selectorObj[res.sex].cateName;
							this.time=res.birthday.substr(0,10)
							resolve();
						})
						.catch(reject);
				});
			},
			//改变了名称
			namechage(e) {
				this.user.username=e.detail.value;
			},
			// 修改信息
			alterInfoFuc(){
				this.saveFlase=true;//返回是否保存
				const infoData={...this.user}
				infoData.userid=this.user.userid+'';
				infoData.sex=	this.cateId+'';
				infoData.birthday=this.time+'';
				return new Promise((resolve, reject) => {
					this.request
						.post('/app/mine/updateAppStu',infoData)
						.then(res => {
							uni.showToast({
									icon: 'none',
									title: '修改成功',
									success: () => {
										uni.switchTab({
											url:"../user"
										})
										// 更改缓存中的数据
										const reptStorage=this.vuex_user
										reptStorage.sex=parseInt(infoData.sex)
										this.vuex_user.sex=parseInt(infoData.sex);
										reptStorage.birthday=infoData.birthday
										reptStorage.avatar=infoData.avatar
										reptStorage.username=infoData.username
										this.updateUser(reptStorage)
										uni.hideLoading()
									}
							});
							resolve();
						})
						.catch(reject);
				});
			},
			//选择日期
			change(e) {
				console.log(e);
				this.time = e.result
			},
			//选择性别
			getResult(e) {
				let index = e[0];
				this.cate=this.selectorObj[index].cateName;
				this.cateId=this.selectorObj[index].id
			},
			onTimeChange(e) {
				this.time = e.detail.value;
			},
			// 跳转链接
			golink(url) {
				uni.navigateTo({
					url: url
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style scoped lang="scss">
	.infomt {
		margin-top: 20upx;
	}
	.nav-bar__cancel {
		font-size: 30upx;
		font-weight: 400;
		color: #ffffff;
		margin-right: 30upx;
	} 
	/deep/.right{
		display: flex;
	}
	.pick-time {
		height: 110upx;
		margin-top: 20upx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		font-size: 32upx;
		font-weight: 400;
		color: #363940;

		text {
			margin-right: 48upx;
		}

		picker {
			flex: 1;
		}
	}
	.rightInput{
		position:absolute;
		right:40upx;
		top: 0upx;
		text-align: right;
		font-size: 32upx;
		color:#636874;
		width: 300upx;
		height: 110upx;
	}
	.txImg{
		width: 74upx!important;
		height: 74upx!important;
		position:absolute;
		right: 34upx;
		top:18upx;
	}
	.infoList{
		.list__item{
			height: 110upx;
			position: relative;
			.title {
				font-size: 32upx;
				color: #363940;
			}
			.right{position: initial!important;	}
			.uni-icons{
				margin-right: 0upx!important;
			}
		}
	}

	
</style>
